<!-- 所有公司 -->

<template>
  <div class="resume_header">
    <span>所有公司</span>
  </div>
  <div class="resume_center">
    <el-table :data="filterTableData.slice((page - 1) * limit, page * limit)" style="width: 100%" height="520px"
      size="large"  @filter-change="tablesort">
      <el-table-column label="公司名称">
        <template #default="scope">
          <router-link :to="{ path: '/eInfoPage', query: { eId: scope.row.eId } }">
            {{ scope.row.businessName }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="公司性质" prop="eNature" sortable width="220" column-key="eNature"
        :filters="filterEnterpriseNatureData" />
      <el-table-column label="经营范围" prop="eIndustry" />
      <el-table-column label="成立时间" prop="businessSetTime" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="default" placeholder="搜索" />
        </template>
        <template #default="scope">
          <el-popconfirm width="220" confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF" title="是否确认操作?"
            cancel-button-type="info" @confirm="handleDelect(scope.$index, scope.row)">
            <template #reference>
              <el-button size="default" type="danger">删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>
  </div>
</template>
<script lang='ts' setup>
import { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
import { adminGetALLEs, adminDelectEnterprise } from "@/api/adminApi"
import { computed, ref, onMounted, reactive, watch, onBeforeMount } from 'vue'
import { useStore } from "vuex"
import Pagination from "@/components/Pagination.vue"
import { data, elmessage } from "@/hook/hook";
import { useRouter } from "vue-router"
const store = useStore()
const router = useRouter()
const es = store.state.eState.Es
// 表格数据定义
interface ES {
  eId: string
  businessName: string
  businessSetTime: string
  eNature: String
  eIndustry: string
}
const tableData: ES[] = reactive([])

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data, index) =>
      !search.value ||
      // 通过岗位名称筛选
      data.businessName.toLowerCase().indexOf(search.value.toLowerCase()) !== -1
  )
)
// 定义筛选类型
interface filterType {
  text: string,
  value: string
}
// 公司性质筛选排序
var eNatureArr: any = reactive([])
const tableData_1: ES[] = reactive([])
const setENatureArr = (arr: any) => {
  eNatureArr = arr
}
const getENatureArr = () => {
  return eNatureArr
}
const tablesort = (filterArr: ES) => {
  // 清除原表格数据
  tableData.splice(0, tableData.length)
  if ((typeof (filterArr.eNature)) == "object") {
    setENatureArr(filterArr.eNature)
  }
  const eNatureLength = getENatureArr().length
  // 按筛选条件重新加入数据
  tableData_1.forEach((valu: any, index: any, arr_1: any) => {
    // 所有筛选重置，即最初排序
    if (eNatureLength == 0) {
      if (tableData.findIndex((item) => item.eId == valu["eId"]) == -1) {
        tableData.push(valu)
      }
    }
    // 只筛选公司性质
    else if (eNatureLength > 0) {
      if (getENatureArr().includes(valu["eNature"])) {
        if (tableData.findIndex((item) => item.eId == valu["eId"]) == -1) {
          tableData.push(valu)
        }
      }
    }

  })
}

// // 公司性质筛选排序
// const filterEnterpriseNature = (
//   value: string,
//   row: ES,
//   column: TableColumnCtx<ES>
// ) => {
//   // const property = column['property']
//   return row["eNature"] === value
// }

const filterEnterpriseNatureData: filterType[] = reactive([
  { text: '国有企业', value: '国有企业' },
  { text: '集体企业', value: '集体企业' },
  { text: '私营企业', value: '私营企业' },

])


// 分页器
const page = ref(1)
const pagesizes = ref([1, 2, 3, 4, 10, 20, 30, 40])
const limit = ref(10)

const handleSizeChange = (val: number) => {
  limit.value = val
  page.value = 1

}
const handleCurrentChange = (val: number) => {
  page.value = val
}

// // 初始化数据
// function initData() {
//   if (tableData.length > 0) {
//     tableData.forEach((value, index, self) => {
//       es.forEach((valu: any, inde: any, sel: any) => {
//         if (self.findIndex(item => item.eId == valu.eId) == -1) {
//           tableData.push(valu)
//         }
//       })
//     })
//   } else {
//     es.forEach((value: any, index: any, self: any) => {
//       tableData.push(value)
//     })
//   }


// }

const handleDelect = (index: number, row: ES) => {
  const newData = {
    ...data(),
    ...row
  }
  adminDelectEnterprise(newData).then((res: any) => {
    if (res.data["code"] == "200") {
      elmessage(res.data["message"], res.data["type"])
      tableData.splice(index, 1)
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else if (res.data["code"] == "501") {
      elmessage(res.data["message"], res.data["type"])
    }
    else {
      console.log(res.data["message"]);

    }
  })
}

// watch(es,(newval,oldval)=>{
//   initData()
// }, {immediate:true,deep:true})

const init = () => {
  adminGetALLEs(data()).then((res: any) => {
    if (res.data["code"] == "200") {
      res.data.datas.forEach((value: any, index: any, self: any) => {
        tableData.push(value)
        tableData_1.push(value)
      })
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data["message"]);
    }
  })
}

onBeforeMount(() => {
  init()
})


</script>
<style scoped>
.pagination {
  float: right;
  margin-right: 50px;
  /* right: 150px; */
}

.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  justify-content: space-between;
}

a {
  text-decoration: none;
  color: #000;
}
</style>